ரியாக்ட் சர்வர் காம்போனென்ட்ஸ்: ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷன் - ஒரு விரிவான வழிகாட்டி

ரியாக்ட் சர்வர் காம்போனென்ட்ஸ் (RSC) என்பது நாம் ரியாக்ட் பயன்பாடுகளை உருவாக்கும் முறையில் ஒரு பெரும் மாற்றத்தைக் குறிக்கிறது, இது செயல்திறன் மற்றும் பயனர் அனுபவத்தில் குறிப்பிடத்தக்க மேம்பாடுகளை வழங்குகிறது. காம்போனென்ட் ரெண்டரிங்கை சர்வருக்கு மாற்றுவதன் மூலம், RSC-கள் வேகமான ஆரம்ப பக்க ஏற்றங்கள், குறைக்கப்பட்ட கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட் மற்றும் மேம்பட்ட SEO-வை செயல்படுத்துகின்றன. இந்த வழிகாட்டி RSC-களின் ஒரு விரிவான கண்ணோட்டத்தை வழங்குகிறது, ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷன் கருத்துக்களை ஆராய்ந்து, நவீன வலை உருவாக்கத்தில் அவற்றின் நடைமுறைப் பயன்பாட்டை நிரூபிக்கிறது.

ரியாக்ட் சர்வர் காம்போனென்ட்ஸ் என்றால் என்ன?

பாரம்பரியமாக, ரியாக்ட் பயன்பாடுகள் கிளையன்ட்-சைட் ரெண்டரிங்கை (CSR) பெரிதும் நம்பியுள்ளன. பிரவுசர் ஜாவாஸ்கிரிப்ட் பண்டல்களைப் பதிவிறக்கி, அவற்றை இயக்கி, பின்னர் UI-ஐ ரெண்டர் செய்கிறது. இந்த செயல்முறை தாமதங்களுக்கு வழிவகுக்கும், குறிப்பாக மெதுவான நெட்வொர்க்குகள் அல்லது சாதனங்களில். சர்வர்-சைட் ரெண்டரிங் (SSR) இந்த சிக்கலைத் தீர்க்க அறிமுகப்படுத்தப்பட்டது, இதில் ஆரம்ப HTML சர்வரில் ரெண்டர் செய்யப்பட்டு கிளையன்ட்டிற்கு அனுப்பப்படுகிறது, இது முதல் உள்ளடக்கக் காட்சியை (FCP) மேம்படுத்துகிறது. இருப்பினும், SSR-க்கு கிளையன்டில் முழு பயன்பாட்டையும் ஹைட்ரேட் செய்ய வேண்டும், இது கணக்கீட்டு ரீதியாக செலவாகும்.

ரியாக்ட் சர்வர் காம்போனென்ட்ஸ் ஒரு வேறுபட்ட அணுகுமுறையை வழங்குகின்றன. அவை உங்கள் பயன்பாட்டின் சில பகுதிகளை நேரடியாக சர்வரில் ரெண்டர் செய்ய அனுமதிக்கின்றன, அவை ஜாவாஸ்கிரிப்டாக கிளையன்ட்டிற்கு அனுப்பப்படாமலேயே. இது பல முக்கிய நன்மைகளுக்கு வழிவகுக்கிறது:

• குறைக்கப்பட்ட கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட்: பதிவிறக்க, அலச மற்றும் இயக்க குறைவான ஜாவாஸ்கிரிப்ட் என்பது வேகமான ஆரம்ப பக்க ஏற்றங்களையும் மேம்பட்ட செயல்திறனையும் குறிக்கிறது, குறிப்பாக குறைந்த சக்தி கொண்ட சாதனங்களில்.
• மேம்பட்ட செயல்திறன்: சர்வர் காம்போனென்ட்கள் பின்தள வளங்களை நேரடியாக அணுக முடியும், கிளையன்டில் இருந்து API அழைப்புகளின் தேவையை நீக்கி, தாமதத்தைக் குறைக்கிறது.
• மேம்படுத்தப்பட்ட SEO: சர்வரில் ரெண்டர் செய்யப்பட்ட HTML தேடுபொறிகளால் எளிதாக அட்டவணைப்படுத்தப்படுகிறது, இது சிறந்த SEO தரவரிசைகளுக்கு வழிவகுக்கிறது.
• எளிமைப்படுத்தப்பட்ட வளர்ச்சி: டெவலப்பர்கள் சிக்கலான டேட்டா ஃபெட்சிங் உத்திகள் இல்லாமல் பின்தள வளங்களுடன் தடையின்றி ஒருங்கிணைக்கும் காம்போனென்ட்களை எழுத முடியும்.

சர்வர் காம்போனென்ட்ஸின் முக்கிய பண்புகள்:

• சர்வர்-மட்டும் இயக்கம்: சர்வர் காம்போனென்ட்கள் சர்வரில் பிரத்தியேகமாக இயங்குகின்றன மற்றும் window அல்லது document போன்ற பிரவுசர்-சார்ந்த API-களைப் பயன்படுத்த முடியாது.
• நேரடி டேட்டா அணுகல்: சர்வர் காம்போனென்ட்கள் தரவுத்தளங்கள், கோப்பு அமைப்புகள் மற்றும் பிற பின்தள வளங்களை நேரடியாக அணுகலாம்.
• பூஜ்ய கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட்: அவை கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட் பண்டல் அளவிற்கு பங்களிக்காது.
• அறிவிப்பு ரீதியான டேட்டா ஃபெட்சிங்: டேட்டா ஃபெட்சிங்கை காம்போனென்டிற்குள்ளேயே நேரடியாகக் கையாளலாம், இது குறியீட்டை சுத்தமாகவும் புரிந்துகொள்ள எளிதாகவும் ஆக்குகிறது.

ஸ்ட்ரீமிங்கைப் புரிந்துகொள்ளுதல்

ஸ்ட்ரீமிங் என்பது ஒரு நுட்பமாகும், இது சர்வர் முழுப் பக்கமும் ரெண்டர் செய்யப்படும் வரை காத்திருக்காமல், UI-ன் பகுதிகளை கிளையன்ட்டிற்கு அவை கிடைக்கும்போதே அனுப்ப அனுமதிக்கிறது. இது பயன்பாட்டின் உணரப்பட்ட செயல்திறனை கணிசமாக மேம்படுத்துகிறது, குறிப்பாக பல டேட்டா சார்புகளைக் கொண்ட சிக்கலான பக்கங்களுக்கு. இது ஒரு வீடியோ ஸ்ட்ரீமைப் பார்ப்பது போன்றது - நீங்கள் பார்க்கத் தொடங்குவதற்கு முன் முழு வீடியோவும் பதிவிறக்கமாகும் வரை காத்திருக்க வேண்டியதில்லை; போதுமான டேட்டா கிடைத்தவுடன் நீங்கள் பார்க்கத் தொடங்கலாம்.

ரியாக்ட் சர்வர் காம்போனென்ட்ஸுடன் ஸ்ட்ரீமிங் எவ்வாறு செயல்படுகிறது:

1. சர்வர் பக்கத்தின் ஆரம்ப ஷெல்லை ரெண்டர் செய்யத் தொடங்குகிறது, இதில் நிலையான உள்ளடக்கம் மற்றும் ப்ளேஸ்ஹோல்டர் காம்போனென்ட்கள் இருக்கலாம்.
2. டேட்டா கிடைக்கும்போது, சர்வர் பக்கத்தின் வெவ்வேறு பகுதிகளுக்கான ரெண்டர் செய்யப்பட்ட HTML-ஐ கிளையன்ட்டிற்கு ஸ்ட்ரீம் செய்கிறது.
3. கிளையன்ட் படிப்படியாக ஸ்ட்ரீம் செய்யப்பட்ட உள்ளடக்கத்துடன் UI-ஐ புதுப்பிக்கிறது, இது வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை வழங்குகிறது.

ஸ்ட்ரீமிங்கின் நன்மைகள்:

• வேகமான முதல் பைட் நேரம் (TTFB): ஆரம்ப HTML கிளையன்ட்டிற்கு மிக வேகமாக அனுப்பப்படுகிறது, இது ஆரம்ப ஏற்றுதல் நேரத்தைக் குறைக்கிறது.
• மேம்பட்ட உணரப்பட்ட செயல்திறன்: முழுப் பக்கமும் முழுமையாக ரெண்டர் செய்யப்படாவிட்டாலும், பயனர்கள் திரையில் உள்ளடக்கம் விரைவில் தோன்றுவதைக் காண்கிறார்கள்.
• சிறந்த பயனர் அனுபவம்: ஸ்ட்ரீமிங் மேலும் ஈர்க்கக்கூடிய மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை உருவாக்குகிறது.

ஸ்ட்ரீமிங்கிற்கான எடுத்துக்காட்டு:

ஒரு சமூக ஊடக ஊட்டத்தை கற்பனை செய்து பாருங்கள். ஸ்ட்ரீமிங் மூலம், அடிப்படை தளவமைப்பு மற்றும் முதல் சில இடுகைகள் உடனடியாக ரெண்டர் செய்யப்பட்டு கிளையன்ட்டிற்கு அனுப்பப்படலாம். சர்வர் தரவுத்தளத்திலிருந்து மேலும் இடுகைகளைப் பெறும்போது, அவை கிளையன்ட்டிற்கு ஸ்ட்ரீம் செய்யப்பட்டு ஊட்டத்துடன் சேர்க்கப்படுகின்றன. இது பயனர்கள் அனைத்து இடுகைகளும் ஏற்றப்படும் வரை காத்திருக்காமல், மிக வேகமாக ஊட்டத்தை உலாவத் தொடங்க அனுமதிக்கிறது.

செலக்டிவ் ஹைட்ரேஷன்

ஹைட்ரேஷன் என்பது சர்வரில் ரெண்டர் செய்யப்பட்ட HTML-ஐ கிளையன்டில் ஊடாடும் வகையில் மாற்றும் செயல்முறையாகும். பாரம்பரிய SSR-ல், முழு பயன்பாடும் ஹைட்ரேட் செய்யப்படுகிறது, இது நேரத்தைச் செலவழிக்கும் செயல்முறையாக இருக்கலாம். மறுபுறம், செலக்டிவ் ஹைட்ரேஷன், ஊடாட வேண்டிய காம்போனென்ட்களை மட்டும் ஹைட்ரேட் செய்ய உங்களை அனுமதிக்கிறது, இது கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்டைக் குறைத்து செயல்திறனை மேம்படுத்துகிறது. நிலையான மற்றும் ஊடாடும் உள்ளடக்கத்தின் கலவையைக் கொண்ட பக்கங்களுக்கு இது குறிப்பாக பயனுள்ளதாக இருக்கும்.

செலக்டிவ் ஹைட்ரேஷன் எவ்வாறு செயல்படுகிறது:

1. சர்வர் முழுப் பக்கத்திற்கான ஆரம்ப HTML-ஐ ரெண்டர் செய்கிறது.
2. கிளையன்ட் பட்டன்கள், படிவங்கள் மற்றும் ஊடாடும் கூறுகள் போன்ற ஊடாடும் காம்போனென்ட்களை மட்டும் தேர்ந்தெடுத்து ஹைட்ரேட் செய்கிறது.
3. நிலையான காம்போனென்ட்கள் ஹைட்ரேட் செய்யப்படாமல் இருக்கின்றன, இது கிளையன்டில் இயக்கப்படும் ஜாவாஸ்கிரிப்ட்டின் அளவைக் குறைக்கிறது.

செலக்டிவ் ஹைட்ரேஷனின் நன்மைகள்:

• குறைக்கப்பட்ட கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட்: இயக்க குறைவான ஜாவாஸ்கிரிப்ட் என்பது வேகமான ஆரம்ப பக்க ஏற்றங்களையும் மேம்பட்ட செயல்திறனையும் குறிக்கிறது.
• மேம்பட்ட ஊடாடும் நேரம் (TTI): பக்கம் முழுமையாக ஊடாட எடுக்கும் நேரம் குறைக்கப்படுகிறது, இது ஒரு சிறந்த பயனர் அனுபவத்தை வழங்குகிறது.
• உகந்த வளப் பயன்பாடு: தேவையான காம்போனென்ட்கள் மட்டுமே ஹைட்ரேட் செய்யப்படுவதால், கிளையன்டின் வளங்கள் மிகவும் திறமையாகப் பயன்படுத்தப்படுகின்றன.

செலக்டிவ் ஹைட்ரேஷனுக்கான எடுத்துக்காட்டு:

ஒரு இ-காமர்ஸ் தயாரிப்புப் பக்கத்தைக் கவனியுங்கள். தயாரிப்பு விளக்கம், படங்கள் மற்றும் மதிப்பீடுகள் பொதுவாக நிலையான உள்ளடக்கம். இருப்பினும், "Add to Cart" பொத்தான் மற்றும் அளவு தேர்ந்தெடுப்பான் ஆகியவை ஊடாடும் தன்மை கொண்டவை. செலக்டிவ் ஹைட்ரேஷன் மூலம், "Add to Cart" பொத்தான் மற்றும் அளவு தேர்ந்தெடுப்பான் மட்டுமே ஹைட்ரேட் செய்யப்பட வேண்டும், அதே நேரத்தில் பக்கத்தின் மீதமுள்ள பகுதி ஹைட்ரேட் செய்யப்படாமல் இருக்கும், இது வேகமான ஏற்றுதல் நேரங்கள் மற்றும் மேம்பட்ட செயல்திறனுக்கு வழிவகுக்கிறது.

ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷனை இணைத்தல்

ரியாக்ட் சர்வர் காம்போனென்ட்ஸின் உண்மையான சக்தி ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷனை இணைப்பதில் உள்ளது. ஆரம்ப HTML-ஐ ஸ்ட்ரீம் செய்வதன் மூலமும், ஊடாடும் காம்போனென்ட்களை மட்டும் தேர்ந்தெடுத்து ஹைட்ரேட் செய்வதன் மூலமும், நீங்கள் குறிப்பிடத்தக்க செயல்திறன் மேம்பாடுகளை அடையலாம் மற்றும் உண்மையிலேயே பதிலளிக்கக்கூடிய பயனர் அனுபவத்தை உருவாக்கலாம்.

பல விட்ஜெட்களைக் கொண்ட ஒரு டாஷ்போர்டு பயன்பாட்டைக் கற்பனை செய்து பாருங்கள். ஸ்ட்ரீமிங் மூலம், டாஷ்போர்டின் அடிப்படை தளவமைப்பு உடனடியாக ரெண்டர் செய்யப்பட்டு கிளையன்ட்டிற்கு அனுப்பப்படலாம். சர்வர் ஒவ்வொரு விட்ஜெட்டிற்கும் டேட்டாவைப் பெறும்போது, அது ரெண்டர் செய்யப்பட்ட HTML-ஐ கிளையன்ட்டிற்கு ஸ்ட்ரீம் செய்கிறது, மேலும் கிளையன்ட் சார்ட்கள் மற்றும் டேட்டா அட்டவணைகள் போன்ற ஊடாடும் விட்ஜெட்களை மட்டும் தேர்ந்தெடுத்து ஹைட்ரேட் செய்கிறது. இது பயனர்கள் அனைத்து விட்ஜெட்களும் ஏற்றப்பட்டு ஹைட்ரேட் ஆகும் வரை காத்திருக்காமல், டாஷ்போர்டுடன் மிக வேகமாக ஊடாடத் தொடங்க அனுமதிக்கிறது.

Next.js உடன் நடைமுறைச் செயலாக்கம்

Next.js என்பது ஒரு பிரபலமான ரியாக்ட் கட்டமைப்பாகும், இது ரியாக்ட் சர்வர் காம்போனென்ட்ஸ், ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷனுக்கான உள்ளமைக்கப்பட்ட ஆதரவை வழங்குகிறது, இது உங்கள் திட்டங்களில் இந்த தொழில்நுட்பங்களைச் செயல்படுத்துவதை எளிதாக்குகிறது. Next.js 13 மற்றும் பிந்தைய பதிப்புகள் RSC-களை ஒரு முக்கிய அம்சமாக ஏற்றுக்கொண்டுள்ளன.

Next.js இல் சர்வர் காம்போனென்ட் உருவாக்குதல்:

இயல்பாக, ஒரு Next.js திட்டத்தின் app கோப்பகத்தில் உள்ள காம்போனென்ட்கள் சர்வர் காம்போனென்ட்களாகக் கருதப்படுகின்றன. நீங்கள் எந்த சிறப்பு வழிகாட்டுதல்களையும் அல்லது சிறுகுறிப்புகளையும் சேர்க்கத் தேவையில்லை. இதோ ஒரு எடுத்துக்காட்டு:

            // app/components/MyServerComponent.js
import { getData } from './data';

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், MyServerComponent ஆனது getData செயல்பாட்டைப் பயன்படுத்தி சர்வரிலிருந்து நேரடியாக டேட்டாவைப் பெறுகிறது. இந்த காம்போனென்ட் சர்வரில் ரெண்டர் செய்யப்படும், மேலும் அதன் விளைவாக வரும் HTML கிளையன்ட்டிற்கு அனுப்பப்படும்.

Next.js இல் கிளையன்ட் காம்போனென்ட் உருவாக்குதல்:

ஒரு கிளையன்ட் காம்போனென்டை உருவாக்க, நீங்கள் கோப்பின் மேல் "use client" வழிகாட்டுதலைச் சேர்க்க வேண்டும். இது நெக்ஸ்ட்.ஜேஎஸ்-க்கு அந்த காம்போனென்டை கிளையன்டில் ரெண்டர் செய்யச் சொல்கிறது. கிளையன்ட் காம்போனென்ட்கள் பிரவுசர்-சார்ந்த API-களைப் பயன்படுத்தலாம் மற்றும் பயனர் ஊடாடல்களைக் கையாளலாம்.

            // app/components/MyClientComponent.js
"use client";

import { useState } from 'react';

function MyClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

export default MyClientComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், MyClientComponent ஆனது காம்போனென்டின் நிலையை நிர்வகிக்க useState ஹூக்கைப் பயன்படுத்துகிறது. இந்த காம்போனென்ட் கிளையன்டில் ரெண்டர் செய்யப்படும், மேலும் பயனர் அதனுடன் ஊடாடலாம்.

சர்வர் மற்றும் கிளையன்ட் காம்போனென்ட்ஸைக் கலத்தல்:

உங்கள் Next.js பயன்பாட்டில் சர்வர் மற்றும் கிளையன்ட் காம்போனென்ட்ஸைக் கலக்கலாம். சர்வர் காம்போனென்ட்கள் கிளையன்ட் காம்போனென்ட்களை இறக்குமதி செய்து ரெண்டர் செய்யலாம், ஆனால் கிளையன்ட் காம்போனென்ட்கள் சர்வர் காம்போனென்ட்களை நேரடியாக இறக்குமதி செய்ய முடியாது. ஒரு சர்வர் காம்போனென்டிலிருந்து ஒரு கிளையன்ட் காம்போனென்டிற்கு டேட்டாவை அனுப்ப, நீங்கள் அதை ப்ராப்ஸாக அனுப்பலாம்.

            // app/page.js
import MyServerComponent from './components/MyServerComponent';
import MyClientComponent from './components/MyClientComponent';

async function Page() {
  return (
    <div>
      <MyServerComponent />
      <MyClientComponent />
    </div>
  );
}

export default Page;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், Page காம்போனென்ட் ஒரு சர்வர் காம்போனென்ட் ஆகும், இது MyServerComponent மற்றும் MyClientComponent இரண்டையும் ரெண்டர் செய்கிறது.

சர்வர் காம்போனென்ட்ஸில் டேட்டா ஃபெட்சிங்:

சர்வர் காம்போனென்ட்கள் கிளையன்டில் இருந்து API அழைப்புகளின் தேவை இல்லாமல் பின்தள வளங்களை நேரடியாக அணுகலாம். நீங்கள் async/await தொடரியலைப் பயன்படுத்தி காம்போனென்டிற்குள் நேரடியாக டேட்டாவைப் பெறலாம்.

            // app/components/MyServerComponent.js

async function getData() {
  const res = await fetch('https://api.example.com/data');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

async function MyServerComponent() {
  const data = await getData();

  return (
    <div>
      <h2>Data from Server</h2>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyServerComponent;

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், getData செயல்பாடு ஒரு வெளிப்புற API-லிருந்து டேட்டாவைப் பெறுகிறது. MyServerComponent ஆனது getData செயல்பாட்டின் முடிவிற்காகக் காத்திருந்து, UI-ல் டேட்டாவை ரெண்டர் செய்கிறது.

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

ரியாக்ட் சர்வர் காம்போனென்ட்ஸ், ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷன் ஆகியவை பின்வரும் வகை பயன்பாடுகளுக்கு குறிப்பாகப் பொருத்தமானவை:

• இ-காமர்ஸ் இணையதளங்கள்: தயாரிப்புப் பக்கங்கள், வகைப் பக்கங்கள் மற்றும் ஷாப்பிங் கார்ட்கள் வேகமான ஆரம்ப பக்க ஏற்றங்கள் மற்றும் மேம்பட்ட செயல்திறனிலிருந்து பயனடையலாம்.
• உள்ளடக்கம் மிகுந்த இணையதளங்கள்: வலைப்பதிவுகள், செய்தி இணையதளங்கள் மற்றும் ஆவணப்படுத்தல் தளங்கள் உள்ளடக்கத்தை வேகமாக வழங்கவும் SEO-வை மேம்படுத்தவும் ஸ்ட்ரீமிங்கைப் பயன்படுத்தலாம்.
• டாஷ்போர்டுகள் மற்றும் நிர்வாகக் குழுக்கள்: பல விட்ஜெட்களைக் கொண்ட சிக்கலான டாஷ்போர்டுகள் கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்டைக் குறைக்கவும் ஊடாடும் தன்மையை மேம்படுத்தவும் செலக்டிவ் ஹைட்ரேஷனிலிருந்து பயனடையலாம்.
• சமூக ஊடக தளங்கள்: ஊட்டங்கள், சுயவிவரங்கள் மற்றும் காலவரையறைகள் உள்ளடக்கத்தை படிப்படியாக வழங்கவும் பயனர் அனுபவத்தை மேம்படுத்தவும் ஸ்ட்ரீமிங்கைப் பயன்படுத்தலாம்.

எடுத்துக்காட்டு 1: சர்வதேச இ-காமர்ஸ் இணையதளம்

உலகளவில் தயாரிப்புகளை விற்கும் ஒரு இ-காமர்ஸ் இணையதளம், பயனரின் இருப்பிடத்தின் அடிப்படையில் ஒரு தரவுத்தளத்திலிருந்து நேரடியாக தயாரிப்பு விவரங்களைப் பெற RSC-களைப் பயன்படுத்தலாம். பக்கத்தின் நிலையான பகுதிகள் (தயாரிப்பு விளக்கங்கள், படங்கள்) சர்வரில் ரெண்டர் செய்யப்படுகின்றன, அதே நேரத்தில் ஊடாடும் கூறுகள் (கார்ட்டில் சேர்க்கும் பொத்தான், அளவு தேர்ந்தெடுப்பான்) கிளையன்டில் ஹைட்ரேட் செய்யப்படுகின்றன. ஸ்ட்ரீமிங், பயனர் அடிப்படை தயாரிப்புத் தகவலை விரைவாகப் பார்ப்பதை உறுதி செய்கிறது, அதே நேரத்தில் மீதமுள்ள உள்ளடக்கம் பின்னணியில் ஏற்றப்படுகிறது.

எடுத்துக்காட்டு 2: உலகளாவிய செய்தி தளம்

உலகளாவிய பார்வையாளர்களை இலக்காகக் கொண்ட ஒரு செய்தி தளம், பயனரின் மொழி மற்றும் பிராந்தியத்தின் அடிப்படையில் வெவ்வேறு மூலங்களிலிருந்து செய்தி கட்டுரைகளைப் பெற RSC-களைப் பயன்படுத்தலாம். ஸ்ட்ரீமிங், இணையதளத்திற்கு ஆரம்ப பக்க தளவமைப்பு மற்றும் தலைப்புகளை விரைவாக வழங்க அனுமதிக்கிறது, அதே நேரத்தில் முழு கட்டுரைகளும் பின்னணியில் ஏற்றப்படுகின்றன. கருத்துப் பிரிவுகள் மற்றும் சமூகப் பகிர்வு பொத்தான்கள் போன்ற ஊடாடும் கூறுகளை ஹைட்ரேட் செய்ய செலக்டிவ் ஹைட்ரேஷன் பயன்படுத்தப்படலாம்.

ரியாக்ட் சர்வர் காம்போனென்ட்ஸைப் பயன்படுத்துவதற்கான சிறந்த நடைமுறைகள்

ரியாக்ட் சர்வர் காம்போனென்ட்ஸ், ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷனிலிருந்து அதிகப் பலனைப் பெற, பின்வரும் சிறந்த நடைமுறைகளைக் கவனியுங்கள்:

• சர்வர் மற்றும் கிளையன்ட் காம்போனென்ட்களை அடையாளம் காணுதல்: உங்கள் பயன்பாட்டை கவனமாக பகுப்பாய்வு செய்து, எந்த காம்போனென்ட்கள் சர்வரில் ரெண்டர் செய்யப்படலாம் மற்றும் எவை கிளையன்டில் ரெண்டர் செய்யப்பட வேண்டும் என்பதைத் தீர்மானிக்கவும்.
• டேட்டா ஃபெட்சிங்கை மேம்படுத்துதல்: சர்வரிலிருந்து கிளையன்டிற்கு மாற்றப்படும் டேட்டாவின் அளவைக் குறைக்க திறமையான டேட்டா ஃபெட்சிங் நுட்பங்களைப் பயன்படுத்தவும்.
• கேச்சிங்கைப் பயன்படுத்துதல்: சர்வரில் சுமைகளைக் குறைக்கவும் செயல்திறனை மேம்படுத்தவும் கேச்சிங் உத்திகளைச் செயல்படுத்தவும்.
• செயல்திறனைக் கண்காணித்தல்: எந்தவொரு செயல்திறன் தடைகளையும் அடையாளம் கண்டு தீர்க்க செயல்திறன் கண்காணிப்பு கருவிகளைப் பயன்படுத்தவும்.
• படிப்படியான மேம்பாடு: ஜாவாஸ்கிரிப்ட் முடக்கப்பட்டிருந்தாலும் உங்கள் பயன்பாடு செயல்படுமாறு வடிவமைக்கவும், அனைத்து பயனர்களுக்கும் ஒரு அடிப்படை அளவிலான செயல்பாட்டை வழங்கவும்.

சவால்கள் மற்றும் கருத்தில் கொள்ள வேண்டியவை

ரியாக்ட் சர்வர் காம்போனென்ட்கள் குறிப்பிடத்தக்க நன்மைகளை வழங்கினாலும், மனதில் கொள்ள வேண்டிய சில சவால்களும் கருத்தாய்வுகளும் உள்ளன:

• சிக்கலானது: RSC-களைச் செயல்படுத்துவது உங்கள் பயன்பாட்டிற்கு சிக்கலைச் சேர்க்கலாம், குறிப்பாக நீங்கள் சர்வர்-சைட் ரெண்டரிங் மற்றும் ஸ்ட்ரீமிங்கில் பரிச்சயமில்லாதவராக இருந்தால்.
• பிழைத்திருத்தம்: பாரம்பரிய கிளையன்ட்-சைட் காம்போனென்ட்களை பிழைத்திருத்தம் செய்வதை விட RSC-களை பிழைத்திருத்தம் செய்வது மிகவும் சவாலானதாக இருக்கலாம், ஏனெனில் நீங்கள் சர்வர் மற்றும் கிளையன்ட் இரண்டையும் கருத்தில் கொள்ள வேண்டும்.
• கருவிகள்: RSC-களைச் சுற்றியுள்ள கருவிகள் இன்னும் உருவாகி வருகின்றன, எனவே நீங்கள் சில வரம்புகள் அல்லது சிக்கல்களைச் சந்திக்க நேரிடலாம்.
• கற்றல் வளைவு: RSC-களை திறம்பட புரிந்துகொண்டு செயல்படுத்துவதில் ஒரு கற்றல் வளைவு உள்ளது.

முடிவுரை

ரியாக்ட் சர்வர் காம்போனென்ட்ஸ், ஸ்ட்ரீமிங் மற்றும் செலக்டிவ் ஹைட்ரேஷன் ஆகியவை வலை உருவாக்கத்தில் ஒரு குறிப்பிடத்தக்க முன்னேற்றத்தைக் குறிக்கின்றன. காம்போனென்ட் ரெண்டரிங்கை சர்வருக்கு மாற்றுவதன் மூலம், இந்த தொழில்நுட்பங்கள் வேகமான ஆரம்ப பக்க ஏற்றங்கள், குறைக்கப்பட்ட கிளையன்ட்-சைட் ஜாவாஸ்கிரிப்ட் மற்றும் மேம்பட்ட SEO-வை செயல்படுத்துகின்றன. மனதில் கொள்ள வேண்டிய சில சவால்கள் மற்றும் கருத்தாய்வுகள் இருந்தாலும், RSC-களின் நன்மைகள் மறுக்க முடியாதவை, மேலும் அவை ரியாக்ட் சூழல் அமைப்பின் ஒரு நிலையான பகுதியாக மாற வாய்ப்புள்ளது. இந்த தொழில்நுட்பங்களைத் தழுவுவதன் மூலம், நீங்கள் வேகமான, திறமையான மற்றும் பயனர் நட்புடன் கூடிய வலைப் பயன்பாடுகளை உருவாக்க முடியும்.

மேலும் படிக்க ஆதாரங்கள்

• ரியாக்ட் 18 அதிகாரப்பூர்வ அறிவிப்பு
• நெக்ஸ்ட்.ஜேஎஸ் ஆப் ரௌட்டர் ஆவணங்கள்
• ரியாக்ட் சர்வர் காம்போனென்ட்ஸ் - Patterns.dev